<!DOCTYPE html>
<html>
<head>
	<title>Bay</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <!-- Styles -->
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/compiled/bootstrap-overrides.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/compiled/theme.css">
    <link rel="stylesheet" type="text/css" href="fonts/css.css">
   <!-- <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic" rel="stylesheet" type="text/css">
   -->

    <link rel="stylesheet" href="css/compiled/index.css" type="text/css" media="screen">    
    <link rel="stylesheet" type="text/css" href="css/lib/animate.css" media="screen, projection">    

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body class="pull_top" style="">
    
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="index.html" class="navbar-brand"><strong>MAY BAN HANG .NET</strong></a>
            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="index.html">HOME</a></li>
                    <li><a href="about-us.html">ABOUT US</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">PAGES <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="features.html">Features</a></li>
                            <li><a href="services.html">Services</a></li>
                            <li><a href="portfolio.html">Portfolio</a></li>
                            <li><a href="portfolio-item.html">Portfolio Item</a></li>
                            <li><a href="coming-soon.html">Coming Soon</a></li>
                            <li><a href="sign-in.html">Sign in</a></li>
                            <li><a href="sign-up.html">Sign up</a></li>
                            <li><a href="backgrounds.html">Backgrounds</a></li>
                        </ul>
                    </li>
                    <li><a href="pricing.html">PRICING</a></li>
                    <li><a href="contact.html">CONTACT US</a></li>
                    <li><a href="blog.html">BLOG</a></li>
                    <li><a href="sign-up.html">Sign up</a></li>
                    <li><a href="sign-in.html">Sign in</a></li>
                </ul>
            </div>
        </div>
    </div>

    <section id="feature_slider" class="disabled">
        <!-- 
            Each slide is composed by <img> and .info
            - .info's position is customized with css in index.css
            - each <img> parallax effect is declared by the following params inside its class:
            
            example: class="asset left-472 sp600 t120 z3"
            left-472 means left: -472px from the center
            sp600 is speed transition
            t120 is top to 120px
            z3 is z-index to 3
            Note: Maintain this order of params

            For the backgrounds, you can combine from the bgs folder :D
        -->
        <article class="slide" id="showcasing" style="background-image: url('img/backgrounds/landscape.png'); display: block; opacity: 0.868928; background-position: 50% 0%; background-repeat: repeat no-repeat;">
            <img class="asset left-30 sp600 t120 z1" src="img/slides/scene1/macbook.png" style="left: -966px; top: 120px; z-index: 1; display: inline;">
            <div class="info" style="display: none;">
                <h2>Beautiful theme for showcasing your works.</h2>
            </div>
        </article>
        <article class="slide active" id="ideas" style="background-image: url('img/backgrounds/landscape.png');  display: block; background-position: 50% 0%; background-repeat: repeat no-repeat;">
            <div class="info" style="display: none;">
                <h2>We love to turn ideas into beautiful things.</h2>
            </div>
            <img class="asset left-480 sp600 t260 z1" src="img/slides/scene2/left.png" style="left: 1086.8833777777777px; top: 260px; z-index: 1; display: inline;">
            <img class="asset left-210 sp600 t213 z2" src="img/slides/scene2/middle.png" style="left: 1189.7953777777777px; top: 213px; z-index: 2; display: inline;">
            <img class="asset left60 sp600 t260 z1" src="img/slides/scene2/right.png" style="left: 1292.7073777777778px; top: 260px; z-index: 1; display: inline;">
        </article>
        <article class="slide" id="tour" style="background-image: url('img/backgrounds/landscape.png');  display: none; background-position: 50% 0%; background-repeat: repeat no-repeat;">
            <img class="asset left-472 sp650 t210 z3" src="img/slides/scene3/ipad.png" style="left: -558px; top: 210px; z-index: 3; display: inline;">
            <img class="asset left-365 sp600 t270 z4" src="img/slides/scene3/iphone.png" style="left: -485px; top: 270px; z-index: 4; display: inline;">
            <img class="asset left-350 sp450 t135 z2" src="img/slides/scene3/desktop.png" style="left: -742px; top: 135px; z-index: 2; display: inline;">
            <img class="asset left-185 sp550 t220 z1" src="img/slides/scene3/macbook.png" style="left: -746px; top: 220px; z-index: 1; display: inline;">
            <div class="info" style="display: none;">
                <h2>Fully Responsive theme</h2>
                <a href="features.html">TOUR THE PRODUCT</a>
            </div>
        </article>
        <article class="slide" id="responsive" style="background-image: url('img/backgrounds/landscape.png');  display: none; background-position: 50% 0%; background-repeat: repeat no-repeat;">
            <img class="asset left-472 sp600 t120 z3" src="img/slides/scene4/html5.png" style="left: -732px; top: 120px; z-index: 3; display: inline;">
            <img class="asset left-190 sp500 t120 z2" src="img/slides/scene4/css3.png" style="left: -732px; top: 120px; z-index: 2; display: inline;">
            <div class="info" style="display: none;">
                <h2>
                    Responsive <strong>HTML5 &amp; CSS3</strong>
                    Theme
                </h2>                
            </div>
        </article>        
    <ul id="pagination" style="left: 603.5px; display: block;"><li class=""><a href="#showcasing">0</a></li><li class="active"><a href="#ideas">1</a></li><li class=""><a href="#tour">2</a></li><li class=""><a href="#responsive">3</a></li></ul><a href="" id="slide-left" style="display: inline;"></a><a href="" id="slide-right" style="display: inline;"></a></section>

    <div id="showcase">
        <div class="container">
            <div class="section_header">
                <h3>Our Services</h3>
            </div>            
            <div class="row feature_wrapper">
                <!-- Features Row -->
                <div class="features_op1_row">
                    <!-- Feature -->
                    <div class="col-sm-4 feature first">
                        <div class="img_box">
                            <a href="services.html">
                                <img src="img/service1.png">
                                <span class="circle"> 
                                    <span class="plus">+</span>
                                </span>
                            </a>
                        </div>
                        <div class="text">
                            <h6>Responsive theme</h6>
                            <p>
                                There are many variations of passages of generators on the  embarrassing hidden in   content here making it look like.
                            </p>
                        </div>
                    </div>
                    <!-- Feature -->
                    <div class="col-sm-4 feature">
                        <div class="img_box">
                            <a href="services.html">
                                <img src="img/service2.png">
                                <span class="circle"> 
                                    <span class="plus">+</span>
                                </span>
                            </a>
                        </div>
                        <div class="text">
                            <h6>Easy customization</h6>
                            <p>
                                There are many variations of passages of generators on the  embarrassing hidden in   content here making it look like.
                            </p>
                        </div>
                    </div>
                    <!-- Feature -->
                    <div class="col-sm-4 feature last">
                        <div class="img_box">
                            <a href="services.html">
                                <img src="img/service3.png">
                                <span class="circle"> 
                                    <span class="plus">+</span>
                                </span>
                            </a>
                        </div>
                        <div class="text">
                            <h6>Made with love</h6>
                            <p>
                                There are many variations of passages of generators on the  embarrassing hidden in   content here making it look like.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="features">
        <div class="container">
            <div class="section_header">
                <h3>Features</h3>
            </div> 
            <div class="row feature">
                <div class="col-sm-6">
                    <img src="img/showcase1.png" class="img-responsive">
                </div>
                <div class="col-sm-6 info">
                    <h3>
                        <img src="img/features-ico1.png">
                        Beautiful on all devices
                    </h3>
                    <p>
                        There are many variations of passages of Lorem Ipsum available, but the randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                    </p>
                </div>
            </div>
            <div class="row feature">
                <div class="col-sm-6 pic-right">
                    <img src="img/showcase2.png" class="pull-right img-responsive">
                </div>
                <div class="col-sm-6 info info-left">
                    <h3>
                        <img src="img/features-ico2.png">
                        Blog page included
                    </h3>
                    <p>
                        There are many variations of passages of Lorem Ipsum available, but the randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                    </p>
                </div>                
            </div>
            <div class="row feature">
                <div class="col-sm-6">
                    <img src="img/showcase3.png" class="img-responsive">
                </div>
                <div class="col-sm-6 info">
                    <h3>
                        <img src="img/features-ico3.png">
                        Simple and clean coming soon page
                    </h3>
                    <p>
                        There are many variations of passages of Lorem Ipsum available, but the randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                    </p>
                </div>
            </div>
        </div>
    </div>


    <!-- Pricing Option -->
    <div id="in_pricing">
        <div class="container">
            <div class="section_header">
                <h3>Pricing</h3>
            </div>

            <div class="row charts_wrapp">
                <!-- Plan Box -->
                <div class="col-sm-4">
                    <div class="plan">
                        <div class="wrapper">
                            <h3>Lite</h3>
                            <div class="price">
                                <span class="dollar">$</span> 
                                <span class="qty">35</span> 
                                <span class="month">/month</span>
                            </div>
                            <div class="features">
                                <p>
                                    <strong>10</strong>
                                    Shared Projects
                                </p>
                                <p>
                                    <strong>4</strong>
                                    Team Members
                                </p>
                                <p>
                                    <strong>10</strong>
                                    Storage
                                </p>
                            </div>
                            <a class="order" href="pricing.html">ORDER NOW</a>
                        </div>
                    </div>
                </div>
                <!-- Plan Box -->
                <div class="col-sm-4 pro">
                    <div class="plan">
                        <div class="wrapper">
                            <img class="ribbon" src="img/badge.png">
                            <h3>Pro</h3>
                            <div class="price">
                                <span class="dollar">$</span> 
                                <span class="qty">99</span> 
                                <span class="month">/month</span>
                            </div>
                            <div class="features">
                                <p>
                                    <strong>10</strong>
                                    Shared Projects
                                </p>
                                <p>
                                    <strong>25</strong>
                                    Team Members
                                </p>
                                <p>
                                    <strong>Unlimited</strong>
                                     Storage
                                </p>
                                <p>
                                    <strong>Plus </strong>
                                    Phone Support
                                </p>
                            </div>
                            <a class="order" href="pricing.html">ORDER NOW</a>
                        </div>
                    </div>
                </div>
                <!-- Plan Box -->
                <div class="col-sm-4 standar">
                    <div class="plan">
                        <div class="wrapper">
                            <h3>Standard</h3>
                            <div class="price">
                                <span class="dollar">$</span> 
                                <span class="qty">65</span> 
                                <span class="month">/month</span>
                            </div>
                            <div class="features">
                                <p>
                                    <strong>10</strong>
                                    Shared Projects
                                </p>
                                <p>
                                    <strong>4</strong>
                                    Team Members
                                </p>
                                <p>
                                    <strong>10</strong>
                                    Storage
                                </p>
                            </div>
                            <a class="order" href="pricing.html">ORDER NOW</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="start">
                <p>Start your free, no-risk, 14 day trial! </p>
                <a href="pricing.html">Start Now!</a>
            </div>
        </div>
    </div>

    <div id="clients">
        <div class="container">
            <div class="section_header">
                <h3>Clients</h3>
            </div>
            <div class="row">
                <div class="col-md-2 col-sm-4 client">
                    <div class="img client1"></div>
                </div>
                <div class="col-md-2 col-sm-4 client">
                    <div class="img client2"></div>
                </div>
                <div class="col-md-2 col-sm-4 client">
                    <div class="img client3"></div>
                </div>
                <div class="col-md-2 col-sm-4 client">
                    <div class="img client1"></div>
                </div>
                <div class="col-md-2 col-sm-4 client">
                    <div class="img client2"></div>
                </div>
                <div class="col-md-2 col-sm-4 client">
                    <div class="img client3"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- starts footer -->
    <footer id="footer">
        <div class="container">
            <div class="row sections">
                <div class="col-sm-4 recent_posts">
                    <h3 class="footer_header">
                        Recent Posts
                    </h3>
                    <div class="post">
                        <a href="blogpost.html">
                            <img src="img/recent_post1.png" class="img-circle">
                        </a>
                        <div class="date">
                            Wed, 12 Dec
                        </div>
                        <a href="blogpost.html" class="title">
                            Randomised words which don't look embarrasing hidden.
                        </a>
                    </div>
                    <div class="post">
                        <a href="blogpost.html">
                            <img src="img/recent_post2.png" class="img-circle">
                        </a>
                        <div class="date">
                            Mon, 12 Dec
                        </div>
                        <a href="blogpost.html" class="title">
                            Randomised words which don't look embarrasing hidden.
                        </a>
                    </div>
                </div>
                <div class="col-sm-4 testimonials">
                    <h3 class="footer_header">
                        Testimonials
                    </h3>
                    <div class="wrapper">
                        <div class="quote">
                            <span>“</span>
                            There are many variations of passages of randomised words which don't look even slightly believable. You need to be sure there isn't anything embarrassing of text.
                            <span></span>
                        </div>
                        <div class="author">
                            <img src="img/user-display.png">
                            <div class="name">Alejandra Galvan Castillo</div>
                            <div class="info">
                                Details Canvas
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 contact">
                    <h3 class="footer_header">
                        Contact
                    </h3>
                    <form action="#" method="post">
                        <input type="text" placeholder="Your name">
                        <input type="text" placeholder="Your email">
                        <textarea rows="3" placeholder="Message"></textarea>
                        <input type="submit" value="Send">
                    </form>
                </div>
            </div>
            <div class="row credits">
                <div class="col-md-12">
                    <div class="row social">
                        <div class="col-md-12">
                            <a href="#" class="facebook">
                                <span class="socialicons ico1"></span>
                                <span class="socialicons_h ico1h"></span>
                            </a>
                            <a href="#" class="twitter">
                                <span class="socialicons ico2"></span>
                                <span class="socialicons_h ico2h"></span>
                            </a>
                            <a href="#" class="gplus">
                                <span class="socialicons ico3"></span>
                                <span class="socialicons_h ico3h"></span>
                            </a>
                            <a href="#" class="flickr">
                                <span class="socialicons ico4"></span>
                                <span class="socialicons_h ico4h"></span>
                            </a>
                            <a href="#" class="pinterest">
                                <span class="socialicons ico5"></span>
                                <span class="socialicons_h ico5h"></span>
                            </a>
                            <a href="#" class="dribble">
                                <span class="socialicons ico6"></span>
                                <span class="socialicons_h ico6h"></span>
                            </a>
                            <a href="#" class="behance">
                                <span class="socialicons ico7"></span>
                                <span class="socialicons_h ico7h"></span>
                            </a>
                        </div>
                    </div>
                    <div class="row copyright">
                        <div class="col-md-12">
                            © 2013 Clean Canvas. All rights reserved. Theme by Detail Canvas.
                        </div>
                    </div>
                </div>            
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="js/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/theme.js"></script>

    <script type="text/javascript" src="js/index-slider.js"></script>	

</body></html>